<template>
  <view>
    <!--方式1.通过事件冒泡-->
    <!-- <my-search @click.native="onSearch"></my-search> -->
    <!-- 方式2,子组件发消息给父组件 -->
    <view class="search-box">
      <my-search @click="onSearch"></my-search>
    </view>
    <view class="scroll-view-container">
      <!-- 方式211.通过style属性,字符串,style="height: 100px;" -->
      <!-- 方式3.通过style属性,对象:style="{height: '100px'}" -->
      <scroll-view scroll-y="true" class="left-scroll-view" :style="{ height: wh + 'px' }">
        <!-- <block>是一个虚拟的节点相当于tempalate -->
        <block v-for="(item, index) in catelist" :key="index">
          <view class="left-scroll-view-item" :class="active === index ? 'active' : ''" @click="activeChanged(index)">{{ item.cat_name }}</view>
        </block>
      </scroll-view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="right-scroll-view" :style="{ height: wh + 'px' }">
        <view class="cate-lv2" v-for="(item2, i2) in cateLevel2" :key="i2">
          <!-- 二级标题 -->
          <view class="cate-lv2-title">/ {{ item2.cat_name }} /</view>
          <!-- 三级列表 -->
          <view class="cate-lv3">
              <view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3" @click="gotoGoodsList(item3)">
                <!-- 方式1.声明式导航影响dom结果 -->
                <!-- <navigator :url="'/subpkg/goods_list/goods_list?cid='+item3.cat_id"> -->
                  <image :src="item3.cat_icon"></image>
                  <text>{{ item3.cat_name }}</text>
                <!-- </navigator> -->
              </view>              
          </view>
        </view>
      </scroll-view>
      <scroll
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wh: 0, //屏幕可用高度
      catelist: [], //分类列表
      active: 0, //分类激活项的索引值
      cateLevel2: [], //二级分类列表
      scrollTop: 0
    };
  },
  onLoad() {
    //获取系统信息
    uni.getSystemInfo({
      success: info => {
        this.wh = info.windowHeight-50;
      }
    });
    //获取分类列表
    this.getCateList();
  },
  methods: {
    onSearch(){
      // console.log('onSearch')D
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    },
     gotoGoodsList(item){
       //方式2.编程式导航
       uni.navigateTo({
         url:'/subpkg/goods_list/goods_list?cid='+item.cat_id
       })
     },
    activeChanged(index) {
      this.active = index;
      this.cateLevel2 = this.catelist[index].children;
      this.scrollTop = this.scrollTop ? 0 : 1
    },
    async getCateList() {
      let { data: res } = await uni.$http.get('/categories');
      if (res.meta.status !== 200) return uni.$showMsg();
      this.catelist = res.message;
      this.cateLevel2 = this.catelist[0].children;
    }
  }
};
</script>

<style lang="scss">
.search-box{
  position: sticky;
  top: 0;
  z-index: 999;
}
.scroll-view-container {
  display: flex;
}
.left-scroll-view {
  width: 120px;
}
//方式1.通过css来控制
.left-scroll-view-item {
  line-height: 60px;
  background-color: #f7f7f7;
  text-align: center;
  font-size: 12px;
  position: relative;
  &.active {
    background-color: #ffffff;
    &::before {
      content: ' ';
      display: block;
      width: 3px;
      height: 30px;
      background-color: #c00000;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.cate-lv2-title {
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding: 15px 0;
}
.cate-lv3 {
  display: flex;
  flex-wrap: wrap;
  .cate-lv3-item {
    width: 33.33%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  image {
    width: 60px;
    height: 60px;
  }
  text {
    font-size: 12px;
  }
}
</style>
